import React, { PureComponent, Fragment } from 'react';
import moment from 'moment';
import { connect } from 'dva';
import {
  Button,
  Tag,
  Modal,
  Form,
  message,
  Table,
  Radio,
  Input,
  Icon,
  Drawer,
  Row,
  Col,
  Switch,
  Progress, DatePicker, Select, Cascader,
} from 'antd';
import MyPagination from '@/components/MyPagination';
import Loading from '@/components/Loading';

import find from 'lodash/find';
import debounce from 'lodash/debounce';
import { ellipsis, afterCloseModal, yearMonthMap } from '@/utils/utils';
import { routerRedux } from 'dva/router';
import BuildModalTitle from '@/components/BuildModalTitle';
import ReactDataGrid from 'react-data-grid';
import Detail from './Detail';
import gold from '../../images/gold.png';

const FormItem = Form.Item;
const { confirm } = Modal;
const { Option } = Select;

const RadioButton = Radio.Button;

const RadioGroup = Radio.Group;

@connect(({ standing_books1,standing_books2,standing_books3,standing_books4,standing_books5,
            standing_books6,standing_books7,standing_books8,standing_books9,standing_books10,
            loading, global }) => ({
  standing_books1,standing_books2,
  standing_books3,standing_books4,
  standing_books5,standing_books6,
  standing_books7,standing_books8,
  standing_books9,standing_books10,
  global,
  loading: loading.models.standing_books1,
}))
@Form.create()
class BasicList extends PureComponent {
  constructor(props) {
    super(props);
    this.permissions = JSON.parse(sessionStorage.getItem('permissions'));
    console.log('window.location.pathname.slice(1)',window.location.pathname.slice(1))
    this.modelName=window.location.pathname.slice(1)
    this.state = {
      showAddBtn: find(this.permissions, { name: 'device_add_and_edit' }),
      showdelBtn: find(this.permissions, { name: 'device_delete' }),
      showPasswordBtn: find(this.permissions, { name: 'user_default_password_edit' }),
      user_password_reset: find(this.permissions, { name: 'user_password_reset' }),
      visible: false,
      done: false,
      page: 1,
      per_page: 30,
      username: '',
      editRecord: {},
      selectedRowKeys: [],

    };
  }


  componentDidMount() {
    const { dispatch } = this.props;
    const {
      [this.modelName]: { pageLoaded, scrollData },
    } = this.props;
    console.log('pageLoaded', pageLoaded);
    const table = document.querySelector('.react-grid-Canvas');
    if (pageLoaded) {
      setTimeout(() => {
        table.scrollTop = scrollData.y;
        table.scrollLeft = scrollData.x;
      }, 0);

    } else {
      const {
        [this.modelName]: { searchParams },
      } = this.props;
      console.log('searchParams', searchParams);
      dispatch({
        type: `${this.modelName}/fetch`,
        payload: searchParams,
        callback: () => {
          const { dispatch } = this.props;
          dispatch({
            type: `${this.modelName}/changeLoaded`,
          });
          dispatch({
            type: `${this.modelName}/changeTableY`,
          });
        },
      });

    }
    window.addEventListener('resize', this.resize);
    table.addEventListener('scroll', debounce(this.scroll, 150));
  }

  scroll = (e) => {
    console.log('scroll');
    const { dispatch } = this.props;
    dispatch({
      type: `${this.modelName}/changeScroll`,
      payload: {
        x: e.target.scrollLeft,
        y: e.target.scrollTop,
      },
    });
  };

  resize = () => {
    const { dispatch } = this.props;
    dispatch({
      type: `${this.modelName}/changeTableY`,
    });
  };
  findChildFunc = (cb) => {
    this.file = cb;
  };

  componentWillUnmount() {
    console.log('componentWillUnmount');
    window.removeEventListener('resize', this.resize);
    const table = document.querySelector('.react-grid-Canvas');
    table.removeEventListener('scroll', debounce(this.scroll, 300));
  }

  handleSearch = (values, cb) => {
    console.log('handleSearch', values);
    const that = this;
    const { dispatch } = this.props;
    dispatch({
      type: `${this.modelName}/fetch`,
      payload: {
        ...values,
      },
      callback() {
        console.log('handleSearch callback');
        if (cb) cb();
      },
    });
  };

  renderSimpleForm() {
    const {
      form: { getFieldDecorator },
      [this.modelName]: { searchParams },
    } = this.props;
    return (
      <Form layout="inline" className="search-form">
        <FormItem>
          <FormItem label="日期">
            {getFieldDecorator('date', {
              initialValue: [searchParams.year, searchParams.month],
            })(
              <Cascader allowClear={false} options={yearMonthMap()} placeholder="请选择"/>,
            )}
          </FormItem>
          <Button
            type="primary"
            icon="search"
            onClick={() => {
              const { form } = this.props;
              form.validateFields((err, fieldsValue) => {
                if (err) return;
                console.log('fieldsValue', fieldsValue);
                this.handleSearch({
                  page: 1,
                  per_page: searchParams.per_page,
                  year: fieldsValue.date[0],
                  month: fieldsValue.date[1],
                });

              });
            }}
          >
            查询
          </Button>
          <Button style={{ marginLeft: 8 }} icon="redo" onClick={this.handleFormReset}>
            重置
          </Button>
        </FormItem>

      </Form>
    );
  }

  handleFormReset = () => {
    const { form } = this.props;
    form.resetFields();
    this.handleSearch({
      year: '2025',
      month: 'all',
      page: 1,
      per_page: 50,
    });
  };
  handleAdd = () => {
    let type='';
    switch (this.modelName){
      case 'standing_books1':
        type=1;
        break;
      case 'standing_books2':
        type=2;
        break;
      case 'standing_books3':
        type=3;
        break;
      case 'standing_books4':
        type=4;
        break;
      case 'standing_books5':
        type=5;
        break;
      case 'standing_books10':
          type=10;
          break;
      case 'standing_books6':
        type=6;
        break;
      case 'standing_books7':
        type=7;
        break;
      case 'standing_books8':
        type=8;
        break;
      case 'standing_books9':
        type=9;
        break;
    }
    const formValues = this.AddForm.props.form.getFieldsValue();
    console.log('formValues', formValues);
    const that = this;
    this.props.dispatch({
      type: `${this.modelName}/add`,
      payload: {
        type,
        date: moment(formValues.date).format('YYYY-MM-DD'),
        parameters: formValues,
      },
      callback() {
        message.success('新建台账成功');
        that.setState({
          addModal: false,
        });
        const {
          [that.modelName]: { searchParams },
        } = that.props;
        that.handleSearch(searchParams);
      },
    });
  };
  handleEdit = () => {
    const formValues = this.EditForm.props.form.getFieldsValue();
    console.log('formValues', formValues);
    const that = this;
    this.props.dispatch({
      type: `${this.modelName}/edit`,
      payload: {
        date: moment(formValues.date).format('YYYY-MM-DD'),
        parameters: formValues,
        id: this.state.editRecord.id,
        type:  this.state.editRecord.type,
      },
      callback() {
        message.success('修改台账成功');
        that.setState({
          editModal: false,
        });
        const {
          [that.modelName]: { searchParams },
        } = that.props;
        that.handleSearch(searchParams);
      },
    });
  };
  handleDelete = id => {
    const that = this;
    const { dispatch } = this.props;
    dispatch({
      type: `${this.modelName}/remove`,
      payload: { id },
      callback: () => {
        message.success('删除台账成功');
        const {
          [that.modelName]: { searchParams },
        } = that.props;
        that.handleSearch(searchParams);
      },
    });
  };

  render() {
    const that = this;
    console.log('this.modelName',this.modelName)
    console.log(this.props)
    const {
      [this.modelName]: { data, loading, tableY, meta, searchParams, selectedRowKeys },
      global: { gridTableW },
    } = this.props;
    let title='';
    let operatePerssion='repair_device_operation';
    let columns=[]
    switch (this.modelName){
      case 'standing_books1':
        title='抢修设备台账';
        operatePerssion='repair_device_operation';
        columns = [
          {
            name: '序号',
            width: 50,
            key: '_index',
            frozen: true,
            formatter: (event) => {
              const {
                [this.modelName]: { meta },
              } = this.props;
              return <p className={'index'}>{((meta.current_page - 1) * meta.per_page) + (event.value + 1)}</p>;
            },
          },
          {
            name: '日期',
            width: 120,
            key: 'date',
          },
          {
            name: '设备名称',
            width: 150,
            key: 'name',
            formatter: (event) => {
              return <span title={event.row.parameters.name}>{event.row.parameters.name}</span>;
            },
          },
          {
            name: '数量',
            width: 100,
            key: 'count',
            formatter: (event) => {
              return <span title={event.row.parameters.count}>{event.row.parameters.count}</span>;
            },
          },
          {
            name: '管理人员',
            width: 150,
            key: 'admin',
            formatter: (event) => {
              return <span title={event.row.parameters.admin}>{event.row.parameters.admin}</span>;
            },
          },
          {
            name: '设备',
            width: 150,
            key: 'device',
            formatter: (event) => {
              return <span title={event.row.parameters.device}>{event.row.parameters.device}</span>;
            },
          },
          {
            name: '记录创建时间',
            key: 'created_at',
            width: 150,
          },
        ];
        break;
      case 'standing_books2':
        title='排水井清淤台账'
        operatePerssion='clean_up_well_operation';
        columns = [
          {
            name: '序号',
            width: 50,
            key: '_index',
            frozen: true,
            formatter: (event) => {
              const {
                [this.modelName]: { meta },
              } = this.props;
              return <p className={'index'}>{((meta.current_page - 1) * meta.per_page) + (event.value + 1)}</p>;
            },
          },
          {
            name: '时间',
            width: 120,
            key: 'date',
          },
          {
            name: '地点',
            width: 200,
            key: 'address',
            formatter: (event) => {
              return <span title={event.row.parameters.address}>{event.row.parameters.address}</span>;
            },
          },
          {
            name: '清淤人员',
            width: 150,
            key: 'member',
            formatter: (event) => {
              return <span title={event.row.parameters.member}>{event.row.parameters.member}</span>;
            },
          },
          {
            name: '是否清淤完毕',
            width: 100,
            key: 'ended',
            formatter: (event) => {
              return <span title={event.row.parameters.ended}>{event.row.parameters.ended}</span>;
            },
          },
          {
            name: '备注',
            width: 150,
            key: 'remark',
            formatter: (event) => {
              return <span title={event.row.parameters.remark}>{event.row.parameters.remark}</span>;
            },
          },
          {
            name: '记录创建时间',
            key: 'created_at',
            width: 150,
          },
        ];
        break;
      case 'standing_books3':
        title='有限空间设备台账'
        operatePerssion='limited_space_device_operation';
        columns = [
          {
            name: '序号',
            width: 50,
            key: '_index',
            frozen: true,
            formatter: (event) => {
              const {
                [this.modelName]: { meta },
              } = this.props;
              return <p className={'index'}>{((meta.current_page - 1) * meta.per_page) + (event.value + 1)}</p>;
            },
          },
          {
            name: '日期',
            width: 120,
            key: 'date',
          },
          {
            name: '设备名称',
            width: 150,
            key: 'name',
            formatter: (event) => {
              return <span title={event.row.parameters.name}>{event.row.parameters.name}</span>;
            },
          },
          {
            name: '数量',
            width: 100,
            key: 'count',
            formatter: (event) => {
              return <span title={event.row.parameters.count}>{event.row.parameters.count}</span>;
            },
          },
          {
            name: '管理人员',
            width: 150,
            key: 'admin',
            formatter: (event) => {
              return <span title={event.row.parameters.admin}>{event.row.parameters.admin}</span>;
            },
          },
          {
            name: '设备',
            width: 150,
            key: 'device',
            formatter: (event) => {
              return <span title={event.row.parameters.device}>{event.row.parameters.device}</span>;
            },
          },
          {
            name: '记录创建时间',
            key: 'created_at',
            width: 150,
          },
        ];
        break;
      case 'standing_books4':
        title='井盖维修维护台账'
        operatePerssion='repair_cover_operation';
        columns = [
          {
            name: '序号',
            width: 50,
            key: '_index',
            frozen: true,
            formatter: (event) => {
              const {
                [this.modelName]: { meta },
              } = this.props;
              return <p className={'index'}>{((meta.current_page - 1) * meta.per_page) + (event.value + 1)}</p>;
            },
          },
          {
            name: '时间',
            width: 120,
            key: 'date',
          },
          {
            name: '地点',
            width: 200,
            key: 'address',
            formatter: (event) => {
              return <span title={event.row.parameters.address}>{event.row.parameters.address}</span>;
            },
          },
          {
            name: '是否维护',
            width: 100,
            key: 'fixed',
            formatter: (event) => {
              return <span title={event.row.parameters.fixed}>{event.row.parameters.fixed}</span>;
            },
          },
          {
            name: '是否维修',
            width: 100,
            key: 'repaired',
            formatter: (event) => {
              return <span title={event.row.parameters.repaired}>{event.row.parameters.repaired}</span>;
            },
          },
          {
            name: '参与人员',
            width: 150,
            key: 'member',
            formatter: (event) => {
              return <span title={event.row.parameters.member}>{event.row.parameters.member}</span>;
            },
          },
          {
            name: '备注',
            width: 150,
            key: 'remark',
            formatter: (event) => {
              return <span title={event.row.parameters.remark}>{event.row.parameters.remark}</span>;
            },
          },
          {
            name: '记录创建时间',
            key: 'created_at',
            width: 150,
          },
        ];
        break;
      case 'standing_books5':
        title='供水管网排查台账'
        operatePerssion='inspect_pipe_network_operation';
        columns = [
          {
            name: '序号',
            width: 50,
            key: '_index',
            frozen: true,
            formatter: (event) => {
              const {
                [this.modelName]: { meta },
              } = this.props;
              return <p className={'index'}>{((meta.current_page - 1) * meta.per_page) + (event.value + 1)}</p>;
            },
          },
          {
            name: '时间',
            width: 120,
            key: 'date',
          },
          {
            name: '管径',
            width: 150,
            key: 'border',
            formatter: (event) => {
              return <span title={event.row.parameters.border}>{event.row.parameters.border}</span>;
            },
          },
          {
            name: '是否维护',
            width: 100,
            key: 'fixed',
            formatter: (event) => {
              return <span title={event.row.parameters.fixed}>{event.row.parameters.fixed}</span>;
            },
          },
          {
            name: '是否维修',
            width: 100,
            key: 'repaired',
            formatter: (event) => {
              return <span title={event.row.parameters.repaired}>{event.row.parameters.repaired}</span>;
            },
          },
          {
            name: '参与人员',
            width: 150,
            key: 'member',
            formatter: (event) => {
              return <span title={event.row.parameters.member}>{event.row.parameters.member}</span>;
            },
          },
          {
            name: '记录创建时间',
            key: 'created_at',
            width: 150,
          },
        ];
        break;
      case 'standing_books10':
          title='排水管网排查台账'
          operatePerssion='inspect_drainage_network_operation';
          columns = [
            {
              name: '序号',
              width: 50,
              key: '_index',
              frozen: true,
              formatter: (event) => {
                const {
                  [this.modelName]: { meta },
                } = this.props;
                return <p className={'index'}>{((meta.current_page - 1) * meta.per_page) + (event.value + 1)}</p>;
              },
            },
            {
              name: '时间',
              width: 120,
              key: 'date',
            },
            {
              name: '管径',
              width: 150,
              key: 'border',
              formatter: (event) => {
                return <span title={event.row.parameters.border}>{event.row.parameters.border}</span>;
              },
            },
            {
              name: '是否维护',
              width: 100,
              key: 'fixed',
              formatter: (event) => {
                return <span title={event.row.parameters.fixed}>{event.row.parameters.fixed}</span>;
              },
            },
            {
              name: '是否维修',
              width: 100,
              key: 'repaired',
              formatter: (event) => {
                return <span title={event.row.parameters.repaired}>{event.row.parameters.repaired}</span>;
              },
            },
            {
              name: '参与人员',
              width: 150,
              key: 'member',
              formatter: (event) => {
                return <span title={event.row.parameters.member}>{event.row.parameters.member}</span>;
              },
            },
            {
              name: '记录创建时间',
              key: 'created_at',
              width: 150,
            },
          ];
          break;
      case 'standing_books6':
        title='排水疏通车疏通台账'
        operatePerssion='dredge_car_operation';
        columns = [
          {
            name: '序号',
            width: 50,
            key: '_index',
            frozen: true,
            formatter: (event) => {
              const {
                [this.modelName]: { meta },
              } = this.props;
              return <p className={'index'}>{((meta.current_page - 1) * meta.per_page) + (event.value + 1)}</p>;
            },
          },
          {
            name: '时间',
            width: 120,
            key: 'date',
          },
          {
            name: '地点',
            width: 200,
            key: 'address',
            formatter: (event) => {
              return <span title={event.row.parameters.address}>{event.row.parameters.address}</span>;
            },
          },
          {
            name: '参与人员',
            width: 150,
            key: 'member',
            formatter: (event) => {
              return <span title={event.row.parameters.member}>{event.row.parameters.member}</span>;
            },
          },
          {
            name: '是否疏通完毕',
            width: 100,
            key: 'ended',
            formatter: (event) => {
              return <span title={event.row.parameters.ended}>{event.row.parameters.ended}</span>;
            },
          },
          {
            name: '备注',
            width: 150,
            key: 'remark',
            formatter: (event) => {
              return <span title={event.row.parameters.remark}>{event.row.parameters.remark}</span>;
            },
          },
          {
            name: '记录创建时间',
            key: 'created_at',
            width: 150,
          },
        ];
        break;
      case 'standing_books7':
        title='消防栓维修维护台账'
        operatePerssion='repair_fire_hydrant_operation';
        columns = [
          {
            name: '序号',
            width: 50,
            key: '_index',
            frozen: true,
            formatter: (event) => {
              const {
                [this.modelName]: { meta },
              } = this.props;
              return <p className={'index'}>{((meta.current_page - 1) * meta.per_page) + (event.value + 1)}</p>;
            },
          },
          {
            name: '时间',
            width: 120,
            key: 'date',
          },
          {
            name: '地点',
            width: 200,
            key: 'address',
            formatter: (event) => {
              return <span title={event.row.parameters.address}>{event.row.parameters.address}</span>;
            },
          },
          {
            name: '是否维护',
            width: 100,
            key: 'fixed',
            formatter: (event) => {
              return <span title={event.row.parameters.fixed}>{event.row.parameters.fixed}</span>;
            },
          },
          {
            name: '是否维修',
            width: 100,
            key: 'repaired',
            formatter: (event) => {
              return <span title={event.row.parameters.repaired}>{event.row.parameters.repaired}</span>;
            },
          },
          {
            name: '参与人员',
            width: 150,
            key: 'member',
            formatter: (event) => {
              return <span title={event.row.parameters.member}>{event.row.parameters.member}</span>;
            },
          },
          {
            name: '备注',
            width: 150,
            key: 'remark',
            formatter: (event) => {
              return <span title={event.row.parameters.remark}>{event.row.parameters.remark}</span>;
            },
          },
          {
            name: '记录创建时间',
            key: 'created_at',
            width: 150,
          },
        ];
        break;
      case 'standing_books8':
        title='供水阀门维修维护台账'
        operatePerssion='repair_valve_operation';
        columns = [
          {
            name: '序号',
            width: 50,
            key: '_index',
            frozen: true,
            formatter: (event) => {
              const {
                [this.modelName]: { meta },
              } = this.props;
              return <p className={'index'}>{((meta.current_page - 1) * meta.per_page) + (event.value + 1)}</p>;
            },
          },
          {
            name: '时间',
            width: 120,
            key: 'date',
          },
          {
            name: '地点',
            width: 200,
            key: 'address',
            formatter: (event) => {
              return <span title={event.row.parameters.address}>{event.row.parameters.address}</span>;
            },
          },
          {
            name: '是否维护',
            width: 100,
            key: 'fixed',
            formatter: (event) => {
              return <span title={event.row.parameters.fixed}>{event.row.parameters.fixed}</span>;
            },
          },
          {
            name: '是否维修',
            width: 100,
            key: 'repaired',
            formatter: (event) => {
              return <span title={event.row.parameters.repaired}>{event.row.parameters.repaired}</span>;
            },
          },
          {
            name: '参与人员',
            width: 150,
            key: 'member',
            formatter: (event) => {
              return <span title={event.row.parameters.member}>{event.row.parameters.member}</span>;
            },
          },
          {
            name: '备注',
            width: 150,
            key: 'remark',
            formatter: (event) => {
              return <span title={event.row.parameters.remark}>{event.row.parameters.remark}</span>;
            },
          },
          {
            name: '记录创建时间',
            key: 'created_at',
            width: 150,
          },
        ];
        break;
      case 'standing_books9':
        title='供水减压阀维修维护台账'
        operatePerssion='repair_pressure_valve_operation';
        columns = [
          {
            name: '序号',
            width: 50,
            key: '_index',
            frozen: true,
            formatter: (event) => {
              const {
                [this.modelName]: { meta },
              } = this.props;
              return <p className={'index'}>{((meta.current_page - 1) * meta.per_page) + (event.value + 1)}</p>;
            },
          },
          {
            name: '时间',
            width: 120,
            frozen: true,
            key: 'date',
          },
          {
            name: '地点',
            width: 200,
            frozen: true,
            key: 'address',
            formatter: (event) => {
              return <span title={event.row.parameters.address}>{event.row.parameters.address}</span>;
            },
          },
          {
            name: '是否维护',
            width: 100,
            key: 'fixed',
            formatter: (event) => {
              return <span title={event.row.parameters.fixed}>{event.row.parameters.fixed}</span>;
            },
          },
          {
            name: '是否维修',
            width: 100,
            key: 'repaired',
            formatter: (event) => {
              return <span title={event.row.parameters.repaired}>{event.row.parameters.repaired}</span>;
            },
          },
          {
            name: '参与人员',
            width: 150,
            key: 'member',
            formatter: (event) => {
              return <span title={event.row.parameters.member}>{event.row.parameters.member}</span>;
            },
          },
          {
            name: '减压阀阀前压力',
            width: 150,
            key: 'fqyl',
            formatter: (event) => {
              return <span title={event.row.parameters.fqyl}>{event.row.parameters.fqyl}</span>;
            },
          },
          {
            name: '减压阀阀后压力',
            width: 150,
            key: 'fhyl',
            formatter: (event) => {
              return <span title={event.row.parameters.fhyl}>{event.row.parameters.fhyl}</span>;
            },
          },
          {
            name: '记录创建时间',
            key: 'created_at',
            width: 150,
          },
        ];

        break;
    }
    columns.push(  {
      name: '操作',
      width: 200,
      key: 'right',
      classname: 'operate',
      formatter: (event) => <Fragment>
        {
          find(this.permissions, { name:operatePerssion }) &&
            <Fragment>
              <Button
                className={'btn-cyan'}
                type="primary"
                icon="edit"
                size="small"
                onClick={(e) => {
                  this.setState({
                    editRecord: event.row,
                    editModal: true,
                  });
                }
                }
              >修改
              </Button>
              <Button
                type="danger"
                icon="delete"
                size="small"
                onClick={(e) => {
                  confirm({
                    title: `确定要删除该台账吗?`,
                    content: '提交后不可再修改',
                    okText: '确定',
                    okType: 'danger',
                    cancelText: '取消',
                    centered: true,
                    maskClosable: true,
                    onOk() {
                      that.handleDelete(event.row.id);
                    },
                    onCancel() {
                      console.log('Cancel');
                    },
                  });
                }
                }
              >删除
              </Button>
            </Fragment>
        }



      </Fragment>,
    })
    const defaultColumnProperties = {
      resizable: true,
    };
    columns=columns.map(c => ({ ...defaultColumnProperties, ...c }))


    let totalWidth = 0;
    for (let i = 0; i < columns.length; i++) {
      totalWidth += columns[i].width;
    }
    if (totalWidth < gridTableW) {
      columns[columns.length - 1].width = columns[columns.length - 1].width + gridTableW - totalWidth;
    }

    console.log('columns',columns)

    return <div className="custom-card">
      <div className="table-title"><span className={'title-item'}>安装维修部 {title}</span>
      </div>
      <div className="table-page">
        <div className="table-info">
          <div className="table-info-item  animated fadeInLeft">
            <p>{title}(条)</p>
            <h4>{meta.total}</h4>
          </div>
          {
            find(this.permissions, { name:operatePerssion }) &&
            <div  className="table-info-right-item" style={{marginTop:'22px'}}>
              <Button
                icon="plus"
                size="large"
                style={{ marginLeft: 8 }}
                type="primary"
                onClick={
                  () => {
                    this.setState({
                      addModal: true,
                    });
                  }
                }
              >
                添加{title}
              </Button>
            </div>
          }

        </div>
        <div className="table-condition">{this.renderSimpleForm()}</div>
        <div className={'table-data-content'}>
          <ReactDataGrid
            columns={columns}
            rowGetter={i => {
              return { ...data[i], _index: i };
            }}
            rowsCount={data.length}
            minHeight={tableY}
            rowSelection={{
              showCheckbox: false,
              enableShiftSelect: true,
              selectBy: {
                indexes: selectedRowKeys,
              },
            }}
            onRowClick={
              (row) => {
                this.props.dispatch({
                  type: `${this.modelName}/changeSelectRow`,
                  payload: [row],
                });
              }
            }

          />
          {
            loading && <Loading/>
          }
        </div>


      </div>
      <div className="table-pagination">
        <MyPagination searchCondition={{ ...searchParams }} meta={meta} handleSearch={this.handleSearch}/>
      </div>
      <Modal
        title={<BuildModalTitle visible={this.state.addModal} modalClass="addModal"
                                title={`添加${title}`}/>}
        visible={this.state.addModal}
        centered
        className="addModal"
        width={600}
        onOk={this.handleAdd}
        onCancel={() => {
          this.setState({ addModal: false });
        }}

      >
        <Detail wrappedComponentRef={(inst) => this.AddForm = inst}/>
      </Modal>
      <Modal
        title={<BuildModalTitle visible={this.state.editModal} modalClass="editModal"
                                title={`${this.state.editRecord.created_at} ${title}`}/>}
        destroyOnClose
        visible={this.state.editModal}
        centered
        className="editModal"
        afterClose={() => {
          afterCloseModal(); // destroyOnClose需要
        }}
        width={600}
        onOk={this.handleEdit}
        onCancel={() => {
          this.setState({ editModal: false, editRecord: {} });
        }}
      >
        <Detail editRecord={this.state.editRecord} wrappedComponentRef={(inst) => this.EditForm = inst}/>
      </Modal>
    </div>;
  }
}

export default BasicList;
